<%@ page import="org.example.demo1.Entity.User" %>
<%@ page import="java.lang.reflect.Array" %>
<%@ page import="java.util.ArrayList" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>书羊网 - 我的书架</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!-- 添加Bootstrap图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* 小说卡片样式 */
        .novel-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }
        
        .novel-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
        }
        
        .novel-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .author-name {
            font-size: 14px;
            color: #666;
        }
        
        .novel-introduction {
            font-size: 13px;
            color: #777;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            max-height: 40px;
        }
        
        .novel-info {
            flex: 1;
            min-width: 0; /* 确保文本可以正确截断 */
        }
        
        .novel-cover {
            flex-shrink: 0; /* 防止封面图片被压缩 */
        }
        
        .novel-tag {
            display: inline-block;
            padding: 2px 8px;
            background-color: #f0f0f0;
            color: #666;
            border-radius: 4px;
            font-size: 12px;
            margin-right: 5px;
            margin-bottom: 5px;
        }
        
        /* 页面标题样式 */
        .section-title {
            position: relative;
            margin-bottom: 25px;
            padding-left: 15px;
            font-weight: bold;
            border-left: 4px solid #e74c3c;
        }
        
        /* 空书架提示 */
        .empty-bookshelf {
            text-align: center;
            padding: 50px 0;
            color: #6c757d;
        }
        
        .empty-bookshelf i {
            font-size: 48px;
            margin-bottom: 20px;
            display: block;
        }
        
        /* 阅读进度条样式 */
        .progress {
            background-color: #e9ecef;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .progress-bar {
            transition: width 0.6s ease;
        }
        
        /* 按钮样式 */
        .btn-outline-primary {
            color: #0d6efd;
            border-color: #0d6efd;
        }
        
        .btn-outline-primary:hover {
            color: #fff;
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        
        .btn-outline-danger {
            color: #dc3545;
            border-color: #dc3545;
        }
        
        .btn-outline-danger:hover {
            color: #fff;
            background-color: #dc3545;
            border-color: #dc3545;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">  <!-- 添加 fixed-top -->
    <div class="container">  <!-- 修改为 container 替代 container-fluid -->
        <a class="navbar-brand py-0" href="#">  <!-- 添加 py-0 减少纵向间距 -->
            <img src="https://mysteriouslamb.oss-cn-hangzhou.aliyuncs.com/icon.jpg" alt="" width="30" height="30">
            书羊网
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto">  <!-- 修改: me-3 变为 me-auto -->
                <li class="nav-item px-1">  <!-- 添加水平间距 -->
                    <a class="nav-link" href="${pageContext.request.contextPath}/MainPage/functionPage/index.jsp">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/MainPage/functionPage/library.jsp">书库</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">书架</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">角色扮演</a>
                </li>

                <c:if test="${not empty permission}">
                    <c:set var="hasAuthorPermission" value="false" />
                    <c:forEach var="perm" items="${permission}">
                        <c:if test="${perm == 2}"> <%-- 假设权限值为2代表作者 --%>
                            <c:set var="hasAuthorPermission" value="true" />
                        </c:if>
                    </c:forEach>

                    <c:choose>
                        <c:when test="${hasAuthorPermission}">
                            <li class="nav-item">
                                <a class="nav-link" href="#${pageContext.request.contextPath}/MainPage/functionPage/authorWorkspace.jsp">作者工作台</a>
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li class="nav-item">
                                <a class="nav-link" href="#">成为作者</a>
                            </li>
                        </c:otherwise>
                    </c:choose>

                    <%-- 管理下拉菜单 --%>
                    <%-- 移除了管理下拉菜单 --%>
                </c:if>
            </ul>
            <form class="d-flex mx-auto" id="searchForm" style="width: 40%; max-width: 400px;"> <!-- 修改: 添加 mx-auto 和 style -->
                <input class="form-control me-2 rounded-pill" type="search" placeholder="请输入书名或作者名" aria-label="Search" id="searchInput">
                <button class="btn btn-outline-success rounded-pill" type="submit" style="min-width: 60px;">搜索</button>
            </form>
            <div class="ms-auto d-flex align-items-center gap-3 me-3">
                <a class="d-flex align-items-center text-decoration-none" href="#" style="gap:12px">
                    <img src="${user.avatar_url}" alt="用户头像"
                         class="rounded-circle shadow-sm transition-all"
                         width="45" height="45"
                         style="transition:0.3s">
                    <div class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle fw-bold text-dark p-2 rounded-3"
                           href="#"
                           role="button"
                           data-bs-toggle="dropdown"
                           style="transition:0.3s">
                            ${user.username}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end border-0 shadow-sm">
                            <li><a class="dropdown-item py-2 text-danger rounded-2" href="${pageContext.request.contextPath}/API/user/logout">🚪 退出登录</a></li>
                        </ul>
                    </div>
                </a>
            </div>
        </div>
    </div>
</nav>

<!-- 主要内容区域 -->
<div class="container" style="margin-top: 80px; padding-top: 20px;">
    <!-- 书架标题和创建分组按钮 -->
    <div class="d-flex justify-content-between align-items-center mt-4 mb-4">
        <h2 class="section-title mb-0">我的书架</h2>
        <button type="button" class="btn btn-outline-primary" id="createGroupBtn">
            <i class="bi bi-plus-circle"></i> 创建分组
        </button>
    </div>
    
    <!-- 小说列表 -->
    <div id="novels-container" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
        <!-- 小说卡片将通过JavaScript动态加载 -->
    </div>
    
    <!-- 空书架提示，初始隐藏 -->
    <div id="empty-bookshelf" class="empty-bookshelf" style="display: none;">
        <i class="bi bi-book"></i>
        <h4>您的书架还是空的</h4>
        <p class="text-muted">去书库中发现喜欢的小说并收藏吧！</p>
        <a href="${pageContext.request.contextPath}/MainPage/functionPage/library.jsp" class="btn btn-outline-primary mt-3">
            去书库看看
        </a>
    </div>
</div>

<!-- 创建分组模态框 -->
<div class="modal fade" id="createGroupModal" tabindex="-1" aria-labelledby="createGroupModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createGroupModalLabel">创建分组</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="createGroupForm">
                    <div class="mb-3">
                        <label for="groupName" class="form-label">分组名称</label>
                        <input type="text" class="form-control" id="groupName" name="groupName" required maxlength="20" placeholder="请输入分组名称">
                        <div class="form-text">分组名称不能超过20个字符</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">选择要加入分组的小说</label>
                        <div id="ungroupedNovels" class="row row-cols-1 row-cols-sm-2 g-3" style="max-height: 400px; overflow-y: auto;">
                            <!-- 未分组的小说将通过JavaScript动态加载 -->
                        </div>
                        <div id="noUngroupedNovels" class="text-center text-muted py-4" style="display: none;">
                            <i class="bi bi-info-circle"></i>
                            <p class="mb-0">暂无可分组的小说</p>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmCreateGroup">创建分组</button>
            </div>
        </div>
    </div>
</div>

<!-- 分组详情模态框 -->
<div class="modal fade" id="groupDetailModal" tabindex="-1" aria-labelledby="groupDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="groupDetailModalLabel">分组详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="group-novels-container" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
                    <!-- 分组内小说将通过JavaScript动态加载 -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
<!-- 引入书架JS -->
<script src="${pageContext.request.contextPath}/MainPage/functionPage/bookshelfDisplay.js"></script>
</body>
</html>
